<template>
  <div>
    {{ msg1 }}
  </div>

  <h3>{{ msg }}</h3>

  <h1>{{ count }}</h1>

  <h2>{{ pubulish }}</h2>

  <div>{{ dxk1() }}</div>
  <div>{{ fullName }}</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";


 //ref 和 reactive 的细节区别   
// setup 和data return的数据都可以在html模板中使用, 并且他们返回的数据会合并为组件对象的数据(代理对象)

// setup 和method 的方法相同优先显示 setup中,一般不建议这么使用
export default defineComponent({
  name: "Child",
  props: ["msg"],

  //   初始化  在setup中没有没有初始化this的值
  setup(props, context) {
    //props 是一个对象,是父级,传递过来的所有数据
    //context 参数是有三个属性 attr(获取父类传递的参数,是props没有接受的全部参数),
    //emit(事件分发,获取父级传递过来的方法) ,slots(插槽)
    console.log("props",props.msg);
    console.log("context",context.attrs.msg2);
    console.log("setup执行了", this);
    const msg1 = "我是子组件";
    const dxk2 = function () {
      console.log("dxk2");
    };

    return { msg1, dxk2 };
  },
  // 组件数据创建之前
  beforeCreate() {
    console.log("beforeCreate执行了", this);
  },

  //  数据渲染完成
  mounted() {
    console.log("mounted执行了", this);
  },

  //   更新数据,返回数据
  data() {
    console.log("data", this);
    return {
      count: 10,
      contend: true,
      firstName: "顿",
      lastName: "小康",
    };
  },

  // methods中的方法和setup中的方法会合并 ,方法
  methods: {
    dxk1() {
      console.log("dxk1");

      return "520";
    },
  },
  // 和methods相比 computer具有缓存效果,而method没有
  //计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
  computed: {
    pubulish(): string {
      return this.contend ? "有内容" : "没有内容";
    },

    fullName: {
      // getter
      get(): string {
        return this.firstName + " " + this.lastName;
      },
      // setter
      set(newValue: string) {
        const names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      },
    },
  },

  //虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
  //这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
  //当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

  // 属性监听
  watch: {},
});
</script>

<style scoped>
</style>